<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="top">
      <div class="dis-f justify-between align-center">
        <div>
          <span>小米网</span>
          <span>MIUI</span>
          <span>米聊</span>
          <span>游戏</span>
          <span>多看阅读</span>
          <span>云服务</span>
          <span>小米网移动版</span>
          <span>Select region</span>
          <span>米粉节答疑</span>
        </div>
        <div>
          <span>注册</span>
          <span>登录</span>
        </div>
      </div>
    </div>
    <main>
      <header class="dis-f justify-between align-center">
        <img src="./images/logo.png" width="70px" alt="" />
        <div class="dis-f flex-col justify-between head-group">
          <div class="text-right">
            <img src="./images/clock.png" alt="" />
            <span>4月14日开放购买</span>
          </div>
          <div class="dis-f">
            <div class="dis-f">
              <div class="input-group">
                <input placeholder="搜索您需要的商品" type="text" />
                <div class="input-text dis-f align-center">
                  <span>小米手环</span>
                  <span>耳机音响</span>
                  <span>保护壳</span>
                </div>
              </div>
              <button class="search">
                <img src="./images/fangdajing.png" alt="" />
              </button>
            </div>
            <button class="shop">
              <img src="./images/shopcar.png" alt="" />
              <span>购物车</span>
            </button>
          </div>
        </div>
      </header>

      <div class="hero dis-f">
        <div class="left">
          <h3>全部商品分类</h3>
          <div class="catigory">
            <div class="title">购买手机</div>
            <p>小米Noto 小米4 红米 红米Noto</p>
          </div>
          <div class="catigory">
            <div class="title">购买电视与平板</div>
            <p>小米电视 小米盒子 小米平板</p>
          </div>
          <div class="catigory">
            <div class="title">路由器与智能硬件</div>
            <p>路由器 体重秤 净化器与滤芯</p>
          </div>
          <div class="catigory">
            <div class="title">插线板、移动电源与电池</div>
            <p>小米移动电源 电池 充电器</p>
          </div>
          <div class="catigory">
            <div class="title">耳机音箱与存储卡</div>
            <p>小米头戴式耳机 小米活塞耳机</p>
          </div>
          <div class="catigory">
            <div class="title">保护套与贴膜</div>
            <p>保护套/保护壳 贴膜 防尘塞</p>
          </div>
          <div class="catigory">
            <div class="title">后盖与个性化配件</div>
            <p>米键 后盖 贴纸 手机支架</p>
          </div>
          <div class="catigory">
            <div class="title">小米生活方式</div>
            <p>服装 米兔 背包 生活周边</p>
          </div>
        </div>
        <div class="right dis-f flex-col">
          <div class="nav dis-f">
            <div>首页</div>
            <div>小米手机</div>
            <div>红米</div>
            <div>小米平板</div>
            <div>小米电视</div>
            <div>盒子</div>
            <div>路由器</div>
            <div>合约机</div>
            <div>服务</div>
            <div>社区</div>
          </div>
          <div class="swiper">
            <div class="wrapper">
              <div class="slider">
                <img src="./images/banner5.png" alt="" />
              </div>
              <div class="slider">
                <img src="./images/banner2.png" alt="" />
              </div>
              <div class="slider">
                <img src="./images/banner3.png" alt="" />
              </div>
              <div class="slider">
                <img src="./images/banner4.png" alt="" />
              </div>
              <div class="slider">
                <img src="./images/banner1.png" alt="" />
              </div>
            </div>
            <div class="counter">
              <button class="active">1</button>
              <button>2</button>
              <button>3</button>
              <button>4</button>
              <button>5</button>
            </div>
          </div>
          <div class="bottom-group dis-f">
            <div class="card">
              <img height="100%" width="100%" src="./images/01.png" alt="" />
            </div>
            <div class="card">
              <img height="100%" width="100%" src="./images/02.png" alt="" />
            </div>
            <div class="card">
              <img height="100%" width="100%" src="./images/03.png" alt="" />
            </div>
          </div>
        </div>
      </div>

      <div class="star-goods">
        <div class="title dis-f justify-between">
          <p>
            小米明星单品
            <span class="tiny-text">根据机型选择</span>
          </p>
          <div class="icons dis-f justify-around">
            <div>
              <img src="./images/05.png" alt="" />
            </div>
            <div>
              <img src="./images/06.png" alt="" />
            </div>
          </div>
        </div>
        <div class="star-grid dis-f">
          <div class="card">
            <img src="./images/star01.jpg" alt="" />
            <p>小米智能插座</p>
            <p>让普通家电变得智能</p>
          </div>
          <div class="card">
            <img src="./images/star02.jpg" alt="" />
            <p>小米空气净化器</p>
            <p>高性能智能空气净化器立即预约</p>
          </div>
          <div class="card">
            <img src="./images/star03.jpg" alt="" />
            <p>小米活塞耳机简装版</p>
            <p>好声音源自活塞式育腔,延续经典设计</p>
          </div>
          <div class="card">
            <img src="./images/star04.jpg" alt="" />
            <p>小米路由器</p>
            <p>顶级双屏幕AC智能路由器,内置1TB大硬盘</p>
          </div>
        </div>
      </div>

      <div class="new-goods">
        <div class="title dis-f justify-between">
          <p>
            新品上架
          </p>
          <div>
            更多>
          </div>
        </div>
        <div class="main dis-f">
          <div class="flex-3">
            <div class="left">
              <div class="item1">
                <img width="100%" src="./images/new01.jpg" alt="" />
              </div>
              <div class="item2">
                <img src="./images/new02.jpg" alt="" />
                <div class="desc">
                  <p>小米手环</p>
                  <p>79元</p>
                </div>
              </div>
              <div class="item3">
                <img src="./images/new03.png" alt="" />
                <div class="desc">
                  <p>5周年米兔钥匙扣</p>
                  <p>9.9元</p>
                </div>
              </div>
              <div class="item4">
                <img src="./images/new04.png" alt="" />
                <div class="desc">
                  <p>QCY派Q8蓝牙耳机</p>
                  <p>59.9元</p>
                </div>
              </div>
              <div class="item5">
                <img src="./images/new05.jpg" alt="" />
                <div class="desc">
                  <p>小米T恤路标MIL OGO</p>
                  <p>39元</p>
                </div>
              </div>
              <div class="item6">
                <img src="./images/new06.jpg" alt="" />
                <div class="desc">
                  <p>小米4实木后盖</p>
                  <p>69元</p>
                </div>
              </div>
              <div class="item7">
                <img src="./images/new07.png" alt="" />
                <div class="desc">
                  <p>小米Note超薄保护壳</p>
                  <p>49元</p>
                </div>
              </div>
              <div class="item8">
                <img src="./images/new08.jpg" alt="" />
                <div class="desc">
                  <p>小米自拍杆</p>
                  <p>49元</p>
                </div>
              </div>
              <div class="item9">
                <img src="./images/new09.jpg" alt="" />
                <div class="desc">
                  <p>先锋CL31系列耳式耳机</p>
                  <p>99元</p>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="cut-off">
              <div class="dis-f justify-between">
                <div class="tip">
                  特价商品
                </div>
                <div>
                  <p>SanDisk32GB存储卡</p>
                  <p>79元<span class="del">109元</span></p>
                  <p>还有更多特价商品</p>
                </div>
                <div>
                  <img src="./images/T1ByZTBjJT1RXrhCrK.jpg" alt="" />
                </div>
              </div>
              <div class="dis-f justify-between">
                <div>
                  <p>特惠配件套餐</p>
                  <p>手机必备配件组合购买</p>
                  <p>实惠更优惠</p>
                </div>
                <div>
                  <img src="./images/channel-list-cool.jpg" alt="" />
                </div>
              </div>
              <div class="dis-f justify-between">
                <div>
                  <p>我爱酷玩</p>
                  <p>避追炫酷的电子产品</p>
                  <p>结交趣味相投的朋友</p>
                </div>
                <div>
                  <img src="./images/channel-list-new.jpg" alt="" />
                </div>
              </div>
            </div>
            <div class="dis-f flex-1 flex-col list-group">
              <ul class="list">
                <li>
                  <div class="red">企业用户采购通道</div>
                  <div>></div>
                </li>
                <li>
                  <div>小米手机防伪查询</div>
                  <div>></div>
                </li>
                <li>
                  <div>小米手机官翻版</div>
                  <div>></div>
                </li>
                <li>
                  <div>小米路由器自翻版</div>
                  <div>></div>
                </li>
                <li>
                  <div>米粉红包</div>
                  <div>></div>
                </li>
              </ul>
              <div class="huafei">
                <p>话费充值</p>
                <input type="text" placeholder="请输入手机号" />
                <select name="" id="">
                  <option value="100">100元</option>
                  <option value=""></option>
                  <option value=""></option>
                </select>
                <span class="tiny-text">实付价格98.4元起</span>
                <button class="pay">立即充值</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <div class="footer">
      <footer>
        <div class="top dis-f text-center align-center">
          <div>
            <img src="./images/10.png" alt="" />
            <p>1小时快修服务</p>
          </div>
          <div>
            <img src="./images/11.png" alt="" />
            <p>7天无理由退货</p>
          </div>
          <div>
            <img src="./images/12.png" alt="" />
            <p>15天免费换货</p>
          </div>
          <div>
            <img src="./images/13.png" alt="" />
            <p>满150元包邮</p>
          </div>
          <div>
            <img src="./images/14.png" alt="" />
            <p>520余家售后网点</p>
          </div>
        </div>
        <div class="mid dis-f">
          <ul>
            <li>帮助中心</li>
            <li>购物指南</li>
            <li>支付方式</li>
            <li>配送方式</li>
          </ul>
          <ul>
            <li>服务支持</li>
            <li>售后政策</li>
            <li>自助服务</li>
            <li>相关下载</li>
          </ul>
          <ul>
            <li>小米之家</li>
            <li>小米之家</li>
            <li>服务网店</li>
            <li>预约亲临到店服务</li>
          </ul>
          <ul>
            <li>关于小米</li>
            <li>了解小米</li>
            <li>加入小米</li>
            <li>联系我们</li>
          </ul>
          <ul>
            <li>关注我们</li>
            <li>新浪微博</li>
            <li>小米部落</li>
            <li>官方微信</li>
          </ul>
          <div>
            <h1>400-100-5678</h1>
            <p>周一-至周日8:00-18 : 00</p>
            <p>(仅收市话费)</p>
            <button>24小时在线客服</button>
          </div>
        </div>
        <div class="bottom text-center">
          <div>
            小米旗下网站:小米网 | MIUI | 米聊 | 多看书城 | 小米路由器 |
            繁体香港|繁体台湾 | English | 小米后院 | 小米天猫店 | 小米淘宝直营店
            |小米网盟
          </div>
          <div>
            mi.com 京ICP证110507号 京ICP备10046444号 京公网安备1101080212535号
            京网文[2014]0059-0009号
          </div>
          <div>
            <img src="./images/footer.png" alt="">
            <select>
              <option>简体中文</option>
              <option>繁体中文</option>
              <option>English</option>
          </select>
          </div>
        </div>
      </footer>
    </div>
  </body>
  <script src="./js/main.js"></script>
</html>
